<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗</title>
		<style>
			.UpWindow{
				position: fixed;
				width: 250px;
				height: 120px;
				background-color:rgba(255,255,255,0.9);
				display: flex;
				flex-wrap: wrap;
				justify-content:center;
				align-items: center;
				top: -150px;
				left: 0;
				right: 0;
				margin: auto;
				text-align: center;
				border-radius: 9px;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				box-shadow: 0px 0px 10px 0px black;
				 transition-duration: 1s;
			}
			.UpWindow span{
				color: rgba(30, 80, 254, 0.9);
				width: 80%;
				font-size:18px;
				font-weight: 900;
				text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 7px;
			}
		</style>
	</head>
	<body>
		
		<button>按我</button>
		
		<script src="./script/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				
				$("button").click(function (){
					CreateUpWindows("emmmm");
				})
				
				
				//弹窗
				let upWindowsIndex = 0;
				function CreateUpWindows(text) {
					var id = "Windows"+upWindowsIndex;
					$("body").append($("<div id='" + id + "' class='UpWindow'><span>" + text + "</span></div>"));
					(async function(){
						await setTimeout(()=>{
							$("#"+id).css("top","0px");
						},0);
						await setTimeout(()=>{
							$("#"+id).css("top","-150px");
						},3000);
						await setTimeout(()=>{
							$("#"+id).remove();
						},4000);
					})();
					upWindowsIndex++;
				}
				
			})
		</script>
	</body>
</html>
